<template>
	<view>
		<view class="uniTabbar">
			<view class="uniTabbar_item" v-for="item in uniTabbar" :key="item.id" @click="changeTab(item.id)">
				{{item.title}}
			</view>
		</view>
		<!-- 视频号直播 -->
		<view v-if="currentTab == 1 && isShow">
			<channel-live :feed-id="oneList.feedId" :finder-user-name="WeChatVideo">
			</channel-live>
		</view>
		<!-- <view class="currentTabbox" v-if="currentTab == 1 && isShow">
			<view class="currentTabFlex" @click="broadcast(oneList.feedId,oneList.nonceId,oneList.status)">
				<image :src="oneList.headUrl" mode="aspectFit"></image>
				<view class="currentcont">
					<view class="view1">
						{{oneList.description}}
					</view>
					<view class="view2">
						{{oneList.nickname}}
					</view>
					<view class="view3" v-if="oneList.replayStatus == 0">
						未生成回放
					</view>
					<view class="view3" v-if="oneList.replayStatus == 1">
						已生成回放
					</view>
					<view class="view3" v-if="oneList.replayStatus == 3">
						回放生成中
					</view>
					<view class="view3" v-if="oneList.replayStatus == 6">
						已过期
					</view>
					<view class="view3" v-if="oneList.status == 2">
						直播中
					</view>
					<view class="view3" v-if="oneList.status == 3">
						直播已结束
					</view>
				</view>
			</view>
			<view class="currentTabFlex" v-for="(item,index) in makeOtherInfos" :key="index"
				@click="broadcast(item.feedId,item.nonceId)">
				<image :src="item.headUrl" mode="aspectFit"></image>
				<view class="currentcont">
					<view class="view1">
						{{item.description}}
					</view>
					<view class="view2">
						{{item.nickname}}
					</view>
					<view class="view3" v-if="item.replayStatus == 0">
						未生成回放
					</view>
					<view class="view3" v-if="item.replayStatus == 1">
						已生成回放
					</view>
					<view class="view3" v-if="item.replayStatus == 3">
						回放生成中
					</view>
					<view class="view3" v-if="item.replayStatus == 6">
						已过期
					</view>
					<view class="view3" v-if="item.status == 2">
						直播中
					</view>
					<view class="view3" v-if="item.status == 3">
						直播结束
					</view>
				</view>
			</view>
		</view> -->
		<!-- 视频号预约 -->
		<view class="currentTabbox" v-if="currentTab == 2 && isShow">
			<view class="currentTabFlex">
				<image :src="oneList.headUrl" mode="aspectFit"></image>
				<view class="currentcont">
					<view class="view1">
						{{oneList.nickname}}
					</view>
					<view class="view2">
						{{dataTime(oneList.startTime)}}
					</view>
					<view class="view_botton">
						<button open-type="share" size="mini">
							<view class="view4" @click="zhuanfa()" ref="iffenxi">
								<image :src="imgHost + '/mine/dnxx.png'" mode=""></image>
								分享
							</view>
						</button>

						<view class="view3" v-if="oneList.reservable" @click="subscribe(oneList.noticeId)">
							预约
						</view>
					</view>
				</view>
			</view>
			<view class="currentTabFlex" v-for="(item,index) in makeOtherInfos" :key="index">
				<image :src="item.headUrl" mode="aspectFit"></image>
				<view class="currentcont">
					<view class="">
						<view class="view1">
							{{item.nickname}}
						</view>
						<view class="view2">
							{{dataTime(item.startTime)}}
						</view>
					</view>
					<view class="view_botton">
						<button open-type="share" size="mini">
							<view class="view4" @click="zhuanfa()">
								<image :src="imgHost + '/mine/dnxx.png'" mode=""></image>
								分享
							</view>
						</button>
						<view class="view3" v-if="item.reservable" @click="subscribe(item.noticeId)">
							预约
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="merTitle">
			{{buttonTitle}}
		</view>
	</view>
</template>

<script>
	import {
		HTTP_REQUEST_URL
	} from '@/config/app.js';
	import {
		getconfig,
	} from '@/api/public.js'
	export default {
		data() {
			return {
				imgHost: HTTP_REQUEST_URL + '/mingpian',
				sphyy_id: '',
				WeChatVideo: '',
				list: null,
				uniTabbar: [{
					id: '1',
					name: 'tab1',
					title: '直播',
				}, {
					id: '2',
					name: 'tab2',
					title: '直播预约'
				}],
				makeOtherInfos: [],
				currentTab: 1,
				oneList: null,
				buttonTitle: '暂无更多直播',
				isShow: false
			};
		},
		onLoad(options) {
			getconfig().then(res => {
				if (res.data.WeChatVideoChannel) {
					this.WeChatVideo = res.data.WeChatVideoChannel
					this.changeTab(1)
				} else {
					uni.showToast({
						title: '请添加视频号助手id',
						icon: 'none', //如果要纯文本，不要icon，将值设为'none'
						duration: 2000 //持续时间为 2秒
					})
					return false
				}

			})
			// 获取视频号直播信息


		},
		onShow() {},
		onShareAppMessage(e) {
			if (e.from === 'button') {
				//console.log('来自页面内转发按钮');
			} else if (e.from === 'menu') {
				//console.log('右上角菜单转发按钮');
			}
			return { // 自定义分享内容
				title: this.share_title,
				path: `pages/activity/VideoNumberBroadcast/VideoNumberBroadcast` // 路径，可传递参数到指定页面
			}
		},
		onShareAppMessage(e) {
			if (e.from === 'button') {
				//console.log('来自页面内转发按钮');
			} else if (e.from === 'menu') {
				//console.log('右上角菜单转发按钮');
			}
			return { // 自定义分享内容
				title: this.share_title,
				path: `pages/activity/VideoNumberBroadcast/VideoNumberBroadcast` // 路径，可传递参数到指定页面
			}
		},
		onReachBottom() {
			console.log('触底');
			let lenght = this.makeOtherInfos.lenght - 1
			this.changeTab(this.currentTab, this.makeOtherInfos[lenght].startTime)
		},
		watch: {
			'currentTab': function(newVal, oldVal) {
				if (newVal != oldVal) {
					this.makeOtherInfos = []
				}
			}
		},
		methods: {
			zhuanfa() {
				this.$refs.iffenxi.open('bottom')
			},
			// 预约视频号直播
			subscribe(noticeId) {
				console.log(noticeId, 'noticeId');
				wx.reserveChannelsLive({
					noticeId: noticeId,
					success(res) {
						console.log(res, '预约视频号直播成功');
					},
					fail(err) {
						console.log(err, 'err预约视频号直播失败');
					}
				})
			},
			// 观看直播
			broadcast(feedId, nonceId) {
				// uni.navigateTo({
				// 	url: `/pages/activity/liveContent/liveContent?feedId=${feedId}&&finderId=${this.WeChatVideo}`
				// })
				wx.openChannelsLive({
					finderUserName: this.WeChatVideo,
					feedId: feedId,
					nonceId: nonceId,
					fail(err) {
						uni.showToast({
							title: err,
							icon: 'none', //如果要纯文本，不要icon，将值设为'none'
							duration: 2000 //持续时间为 2秒
						})
					}
				})
			},
			changeTab(id, time) {
				let that = this;
				console.log(id, 'tabtabtab');
				this.currentTab = id;
				if (id == 1) {
					wx.getChannelsLiveInfo({
						finderUserName: that.WeChatVideo,
						endTime: time,
						// 视频号 ID  
						success(res) {
							console.log(res, '视频号直播信息');
							that.oneList = res
							if (res.otherInfos) {
								that.makeOtherInfos = that.makeOtherInfos.concat(res.otherInfos);
							}
							that.isShow = true
							that.buttonTitle = '暂无更多直播'
						},
						fail(err) {
							if (err.err_code == 1) {
								that.isShow = false
								that.buttonTitle = '暂无直播'
							}
						}
					})
				}
				if (id == 2) {
					// 获取视频号直播预告信息
					wx.getChannelsLiveNoticeInfo({
						finderUserName: that.WeChatVideo,
						// 视频号 ID  
						success(res) {
							that.isShow = true
							that.oneList = res
							console.log(res, '获取视频号直播预告信息成功');
							that.makeOtherInfos = res.otherInfos;
							that.buttonTitle = '暂无更多直播预约'
						},
						fail(err) {
							console.log(err, 'err获取视频号直播预告信息');
							if (err.err_code == 1) {
								that.isShow = false
								that.buttonTitle = '暂无直播预约'
							}
						}
					})
				}

			},
			// 转换时间的方法
			dataTime(time) {
				const timestamp = time;

				// 将时间戳转换为毫秒
				const milliseconds = timestamp * 1000;

				// 创建一个新的 Date 对象
				const date = new Date(milliseconds);

				// 获取年、月、日、时、分、秒
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从0开始，因此需要加1
				const day = date.getDate();
				const hours = date.getHours();
				const minutes = date.getMinutes();
				const seconds = date.getSeconds();

				// 构建日期时间字符串
				const formattedDateTime =
					`${year}年${month < 10 ? '0' : ''}${month}月${day < 10 ? '0' : ''}${day}日 ${hours}时${minutes}分`;
				return formattedDateTime;
			},
			qqqqqqqqqqq() {
				// 预约直播
				uni.reserveChannelsLive({
					noticeId: this.sphyy_id,
					success(res) {
						console.log(res, '预约直播');
						// console.log(res.status,'预约直播');
					},
					fail(err) {
						console.log(err, 'err预约直播');
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.merTitle {
		width: 100vw;
		text-align: center;
	}

	.uniTabbar {
		display: flex;
	}

	.uniTabbar_item {
		color: #000000;
		font-size: 32rpx;
		margin: 20rpx;
	}

	.currentTabbox {
		width: 96%;
		margin: auto;
		overflow-y: auto;

		.currentTabFlex {
			display: flex;
			background: white;
			border-radius: 20rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			box-sizing: border-box;

			image {
				border-radius: 10rpx;
				width: 160rpx;
				height: 160rpx;
				margin-right: 20rpx;
			}

			.currentcont {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.view1 {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2; // 控制多行的行数
					-webkit-box-orient: vertical;
					font-size: 17px;
					font-weight: bolder;
					width: 100%;
					height: 40rpx;
					line-height: 40rpx;
				}

				.view2 {
					font-size: 12px;
					color: #8f8f8f;
				}

				.view_botton {
					width: 60vw;
					display: flex;
					justify-content: space-around;
					align-items: center;
					height: 30rpx;

					.view4 {
						line-height: 30rpx;

						image {
							height: 30rpx;
							width: 30rpx;

						}
					}
				}

			}

		}
	}
</style>